<template>
  <div class="inputItem">
    <div class="label">{{ inputLabel }}</div>
    <div class="value">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'

const props = defineProps({
  label: { type: String, defalut: 'label' },
  moreLong: { type: Boolean || Number || String, defalut: false },
})

onMounted(() => {
  labelHandle()
  moreLongHandle()
})

watch(
  () => props.label,
  () => labelHandle()
)

watch(
  () => props.moreLong,
  () => moreLongHandle()
)

// 输入框标签
const inputLabel = ref<string>('Label')
const labelHandle = () => {
  if (!props.label) return (inputLabel.value = 'Label')

  if (props.label.trim().length === 0) inputLabel.value = 'Label'
  else inputLabel.value = props.label
}

// 输入框宽度
const inputItemWidth = ref<string>('350px')
const moreLongHandle = () => {
  // 判定是否为数字
  if (typeof props.moreLong === 'number') {
    inputItemWidth.value = props.moreLong + 'px'
    return
  }

  // 判断是否为字符串，且能强转为数字
  if (typeof props.moreLong === 'string') {
    const l = parseInt(props.moreLong)
    const lenSame = props.moreLong.length === l.toString().length

    if (!isNaN(l) && lenSame) {
      inputItemWidth.value = l + 'px'
      return
    }
  }

  // 判定是否为布尔值
  const l = 350 * 2 + 15
  if (props.moreLong) inputItemWidth.value = l + 'px'
  else inputItemWidth.value = '350px'
}
</script>

<style scoped lang="less">
.inputItem {
  height: 40px;
  width: v-bind('inputItemWidth');
  display: flex;
  align-items: center;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 15px;
  // background-color: #cfcdcd21;

  > .label {
    min-width: 120px;
    height: 100%;
    font-size: 15px;
    font-weight: bold;
    color: #606266;
    user-select: none;
    background-color: #c8e0e4;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 5px;
    padding-right: 5px;
  }

  > .value {
    flex: 1;
    display: flex;
    height: 100%;
    border-radius: 4px;
    box-shadow: 0 0 1px 1px #bdbdbd8a;
  }
}
</style>
